<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import { getCompanyList, getClassNameApi } from '@/api/table'
import { useTable } from '@/hooks/web/useTable'
import { ref, reactive, onMounted } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import pieChart from './components/pie.vue'
import { Form } from '@/components/Form'
import { ElOption } from 'element-plus'
import { formatToDateTime, getHourMins } from '@/utils/dateUtil'
let sonFlag = ref(false)
const cid = ref(0)
const { tableState, tableMethods } = useTable({
    fetchDataApi: async () => {
        const { startTime, endTime } = getTime()
        const res = await getCompanyList({ pageIndex: 1, pageSize: 999, startTime, endTime, cid: cid.value })
        let list = []
        for (var i = 0; i < res.data.length; i++) {
            list.push({ name: res.data[i].nickname, company: res.data[i].company, times: res.data[i].times * 1 })
        }
        const newList = list.reduce((acc, item) => {
            const existingItem = acc.find((i) => i.hm === getHourMins(item.times))
            if (existingItem) {
                existingItem.name += `${item.company}(${item.name})`
            } else {
                acc.push({
                    name: `${item.company}(${item.name})`,
                    times: formatToDateTime(item.times),
                    hm: getHourMins(item.times)
                })
            }
            return acc
        }, [])
        return {
            list: newList,
            total: newList.length
        }
    }
})
const getTime = () => {
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const timestamp = today.getTime()
    return { startTime: timestamp, endTime: timestamp + (24 * 60 * 60 * 1000) }
}
const { dataList } = tableState
const columns = reactive<CrudSchema[]>([
    {
        field: 'times',
        label: '时间',
    },
    {
        field: 'name',
        label: '公司名(面试人)',
    },
])
const schema = reactive([])
onMounted(async () => {
    let { data } = await getClassNameApi({ pageIndex: 1, pageSize: 999 })
    cid.value = data.list[0].cid
    sonFlag.value = true
    let optionList = data.list.reduce((acc, item) => {
        acc.push({ label: item.bak + item.name, value: item.cid })
        return acc
    }, [])
    schema.push({
        field: 'cid',
        label: '班级',
        component: 'Select',
        componentProps: {
            options: optionList,
            on: {
                change: (item) => {
                    cid.value = item
                    tableMethods.refresh()
                }
            },
            slots: {
                default: (options: SelectOption[]) => {
                    if (options.length) {
                        return options?.map((v) => {
                            return <ElOption key={v.value} label={v.label} value={v.value} />
                        })
                    } else {
                        return null
                    }
                },
            }
        }
    })
})
</script>

<template>
    <ContentWrap>
        <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'" />
    </ContentWrap>
    <div style="display: flex;width: 100%;">
        <div style="flex: 1;">
            <ContentWrap title="今天面试统计">
                <Table v-if="sonFlag" :columns="columns" :data="dataList" :loading="loading" />
            </ContentWrap>
        </div>
        <div style="flex: 1;">
            <ContentWrap title="面试总数据统计">
                <pieChart v-if="sonFlag" :cid="cid"></pieChart>
            </ContentWrap>
        </div>
    </div>
</template>
